<template>
  <div v-show="store.videoInfo.isOpen" class="video-panel-box">
    <cardPanel :title="store.videoInfo.title" :show="true" @close="onClose">
      <div class="video-panel-content">
        <video
          width="760"
          height="450"
          controls
          muted
          autoplay
          :src="testVideo"
        ></video>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
import cardPanel from "@/components/cardPanel/index.vue";
import { videoStore } from "@/stores/video";
import testVideo from "@/assets/image/test.mp4";

const store = videoStore();

const onClose = () => {
  store.videoInfo = {
    isOpen: false,
    title: "",
  };
};
</script>

<style lang="scss" scoped>
.video-panel-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 500px;
}
</style>
